@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  height: 100%;
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 224 71.4% 4.1%;
    --card: 0 0% 100%;
    --card-foreground: 224 71.4% 4.1%;
    --popover: 0 0% 100%;
    --popover-foreground: 224 71.4% 4.1%;
    --primary: 266, 100%, 50%;
    --primary-foreground: 210 20% 98%;
    --secondary: 220 14.3% 95.9%;
    --secondary-foreground: 220.9 39.3% 11%;
    --muted: 220 14.3% 95.9%;
    --muted-foreground: 220 8.9% 46.1%;
    --accent: 220 14.3% 95.9%;
    --accent-foreground: 220.9 39.3% 11%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 20% 98%;
    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 262.1 83.3% 57.8%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 249 100% 3.9%;
    --foreground: 248 100% 88%;
    --card: 224 71.4% 4.1%;
    --card-foreground: 210 20% 98%;
    --popover: 224 71.4% 4.1%;
    --popover-foreground: 210 20% 98%;
    --primary: 266, 100%, 50%;
    --primary-foreground: 210 20% 98%;
    --secondary: 215 27.9% 16.9%;
    --secondary-foreground: 210 20% 98%;
    --muted: 215 27.9% 16.9%;
    --muted-foreground: 217.9 10.6% 30.9%;
    --accent: 215 27.9% 16.9%;
    --accent-foreground: 210 20% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 20% 98%;
    --border: 247, 18.3%, 18.2%;
    --input: 215 27.9% 16.9%;
    --ring: 263.4 70% 50.4%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

.animate-slide {
  animation: 15s slide linear infinite;
}

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.ce-popover-item:hover {
  @apply bg-muted/40 transition-all !important;
}

.ce-popover--opened {
  @apply bg-card outline-none border-border dark:text-muted;
}

.ce-popover-item__icon {
  @apply dark:bg-background text-white font-medium shadow-none dark:border-[1px] !important;
}

.ce-popover-item__title {
  @apply dark:text-Neutrals/neutrals-7 font-normal;
}

.cdx-search-field {
  @apply bg-background;
}

.ce-toolbar__content,
.ce-block__content {
  max-width: 750px;
}

.editorFocus {
  @apply border-none outline-none;
}

/* .dotPattern {
  background-image: radial-gradient(rgb(25, 25, 25) 1px, transparent 1px);
  background-size: 30px 30px;
} */

.ql-toolbar::-webkit-scrollbar {
  display: none;
}

.ql-toolbar {
  @apply flex flex-wrap items-center justify-center dark:bg-background/70 bg-white/40 backdrop-blur-md z-40 sticky top-0 !border-none left-0 right-0;
}

.ql-formats {
  @apply flex flex-shrink-0;
}

.ql-container {
  @apply !border-none;
}

.ql-editor > p,
ol,
ul {
  @apply dark:text-washed-purple-700;
}
